import React, { useState } from 'react'
import { MessageOutlined, PhoneOutlined, LockOutlined } from '@ant-design/icons';
import { Input, message, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import * as axios from '../axiosAPI/zxr'

export default function Forgot() {
    let [phone, setPhone] = useState('')
    let [code, setCode] = useState('')
    let [password, setPassword] = useState('')
    let [ckcode, setCkcode] = useState('')
    let navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();

    let [font, setFont] = useState('发送验证码')
    let getcode = async () => {
        let str = '0123456789'
        let c = ''
        for (let i = 0; i < 4; i++) {
            let idx = Math.floor(Math.random() * 9)
            c += str[idx]
        }
        setCode(c)
        setFlag(false)
        changefont()
        let result = await axios.default.resetsend(phone, c)
        if (result.state) {
            messageApi.open({
                type: 'success',
                content: result.mess,
            });
        } else {
            messageApi.open({
                type: 'error',
                content: mess,
            });
        }
    }
    let [flag, setFlag] = useState(true)

    let changefont = () => {
        let num = 60
        if (flag) {
            let t = setInterval(() => {
                --num
                setFont(`${num} s`)
                if (num === 0) {
                    setFlag(true)
                    clearInterval(t)
                    setFont('发送验证码')
                }
            }, 1000)
        }
    }

    let reset = async() => {
        if(ckcode !== '' || code !== ''){
            if(ckcode === code){
                let result = await axios.default.reset(phone, password)
                if(result.state){
                    messageApi.open({
                        type: 'success',
                        content: result.mess,
                    });
                    let t = setTimeout(() => {
                        setCode('')
                        setCkcode('')
                        setPhone('')
                        setPassword('')
                        navigate('/backlogin')
                        clearTimeout(t)
                    }, 2000)
                }
            }
        }
    }
    return (
        <div className='forgotpage'>
            <div className="content">
                <div className="left">
                    <img src="/login.png" alt="" />
                </div>
                <div className="right">
                    <p className='title'>密码重置</p>
                    <div className='form'>
                        <Input
                            placeholder="请输入手机号"
                            prefix={
                                <PhoneOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            value={phone}
                            onChange={(val) => { setPhone(val.target.value) }}
                        />
                        <Input
                            className='margin'
                            placeholder="请输入验证码"
                            prefix={
                                <MessageOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            suffix={
                                flag ? <Button onClick={() => { getcode() }} className='send'>{font}</Button> : <Button disabled={true} className='send'>{font}</Button>
                            }
                            value={ckcode}
                            onChange={(val) => { setCkcode(val.target.value) }}
                        />
                        <Input.Password
                            placeholder="请输入密码"
                            prefix={
                                <LockOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            className={code !== '' && ckcode !== '' && ckcode === code?'password':'hidden'}
                            value={password}
                            onChange={(val) => {setPassword(val.target.value)}}
                         />
                        <p className='btn' style={{ marginTop: '30px' }}>
                            <button onClick={() => { reset() }}>重置</button>
                        </p>
                    </div>
                </div>
            </div>
            {contextHolder}
        </div>
    )
}
